<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 使用不同智能机的宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <title>MissQ校花</title>
    <!-- 标注网页的作者 -->
    <meta name="author" content="jinyang_jane@163.com">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/styleU.css"/>
    <link rel="stylesheet" href="css/styleT.css"/>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script>
        var flog=true;

        //获取本地视频
        function change(){
            var file = document.getElementById('file_input').files[0];
            var url = URL.createObjectURL(file);
            $('.change-cov').css('display','block');
            $('video').attr('src',url);
            initialize();
            $('.add').css('display','none');
        }

        //获取视频截屏
        function initialize() {
            var video, output,input;
            output = document.getElementById('output');
            video = document.getElementById("video");
            input=document.getElementById('imgUrl');
            video.onloadeddata=function() {
                var scale = 0.8;
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth * scale;
                canvas.height = video.videoHeight * scale;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                var img = document.createElement("img");
                img.src = canvas.toDataURL("image/png");
                input.value=canvas.toDataURL("image/png");
//                alert(input.value.length);
                img.className='coverImg';
                output.appendChild(img);
                output.appendChild(input);
                var H=img.offsetHeight;
                var W=img.offsetWidth;
                output.style.height=H+'px';
                img.style.marginLeft=-W/2+'px';
                img.style.marginTop=-H/2+'px';





//                var urlData=$('#output img').attr('src');
//                var form=$('form');
//                var formData = new FormData(form);
//                formData.append("imageName",convertBase64UrlToBlob(urlData));
//                console.log(imageName);
            };
        };

//        /**
//         * 将以base64的图片url数据转换为Blob
//         * @param urlData
//         *            用url方式表示的base64图片数据
//         */
//        function convertBase64UrlToBlob(urlData){
//
//            var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
//            console.log(bytes.length);
//            //处理异常,将ascii码小于0的转换为大于0
//            var ab = new ArrayBuffer(bytes.length); //创建缓冲区
//            var ia = new Uint8Array(ab);
//            for (var i = 0; i < bytes.length; i++) {
//                ia[i] = bytes.charCodeAt(i);
//            }
////            console.log(ia)
//
//            return new Blob( [ab] , {type : 'image/png'});
//        }


        //分类列表自适应屏幕
        function setHeight(){
            var aVideoList=$('.video-list');
            var aImgBox=$('.imgBox');
            aImgBox.each(function(i){
                aImgBox[i].css('height',aVideoList[i].width());
            });
        }
        //ajax成功的回调函数
        function callback(json,n){
            var oMain=$('.main');
            for (var i = 0; i < n; i++) {
                var oDiv = $('<div></div>');
                oDiv.html('<img src="'+json.lists[i].pic+'" alt="" class="class-img"/>\
                                <div class="class-cover"></div>\
                                <span class="class-name">'+json.lists[i].name+'</span>');
                oDiv.addClass('video-box col-xs-6 col-sm-4');
                oMain.append(oDiv);
            }

            setHeight();

            //点分类项改变获取值
            $('.video-box').on('click',function(){
                var i=$(this).index();
                $('.video-box>.class-name').each(function(){
                    var val=$('.video-box>.class-name').eq(i).html();
                    $('.videoClassify').css('display','none');
                    $('.upVideo').css('display','block');
                    $('.choose-right').html(val);
                    flog=false;
                });
            });

        }
        //创建分类列表
        function create(n) {
            $.get('json/classify.json',function(data){
                callback(data,n);
            },'json');

        };


        $(document).ready(function(){
            var oLi1=$('#content li');
             oLi1.css('height',oLi1.width());
            $('.choose-right').on('click',function(){
                $('.upVideo').css('display','none');
                $('.videoClassify').css('display','block');
                if(flog){
                    create(6);
                }

            });

        });
    </script>
</head>
<body>
<form action="" id="form">
    <div class="container w640" id="main">
        <div class="videoClassify" style="display: none">
            <p class="class-title">选择分类</p>
            <div class="main">
                <!--<div class="video-box col-xs-6 col-sm-4">-->
                <!--<img src="img/t1.jpg" alt="" class="class-img"/>-->
                <!--<div class="class-cover"></div>-->
                <!--<span class="class-name">#唱歌</span>-->
                <!--</div>-->
            </div>
        </div>
        <div class="upVideo">
            <ul class="clearfix choose">
                <li class="fl choose-left">选择分类</li>
                <li class="fr choose-right">未选择</li>
            </ul>
            <div class="change-cov" style="display: none;">
                <div class="img-box">
                    <video width="100%" controls autoplay id="video" style="display: none;">
                        <source src="" type="video/webm">
                        <source src="" type="video/mp4">
                        您的浏览器不支持 HTML5 video 标签。
                    </video>
                    <div id="output">
                        <input type="hidden" value="" id="imgUrl"/>
                    </div>
                </div>
                <p class="hint">我们将以此图片作为视频的封面图</p>
            </div>
            <ul class="content" id="content">
                <li class="add"><div><input accept="video/*" type="file" id="file_input" onchange="change()"></div></li>
            </ul>
            <textarea class="video-introduce" placeholder="介绍一下你的视频吧~"></textarea>
            <p class="contant">联系方式:</p>
            <input type="text" placeholder="手机号" class="contant-i"/>
            <input type="text" placeholder="微信号" class="contant-i"/>
            <p class="message">添加您的联系方式，如我们对您的高颜值感兴趣，可方便在第一时间联系您，您则有可能成为MissQ的签约女神哦~~</p>
            <div class="sub">确定</div>
        </div>
    </div>
</form>

</body>
</html>